<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas 绘制标准圆弧</title>
<style>
    body { background: url("/icon.png") repeat; }
    #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的浏览器居然不支持Canvas? 
    </canvas>
</div>

<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 600;
    var context = canvas.getContext("2d");
    context.fillStyle = "#fff";
    context.fillRect(0, 0, 800, 600);


    context.beginPath();
    context.strokeStyle = "red";


    /*
    x, y  圆心坐标
    radius  圆半径
    startAngle  绘制圆开始弧度值0-2*Math.PI之间
    endAngle  绘制圆开始弧度值0-2*Math.PI之间
    anticlockwise  表示绘制的方法, 是否是逆时针方向，默认false
    */
    // context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    context.arc(100, 100, 50, 0.5*Math.PI, 2*Math.PI, false);
    context.stroke();

}
</script>
</body>

</html>